<template>
  <div>
    <ConTitle :topTitle="topTitle"/>
    <el-tabs type="border-card" active-name="all" class="cart_top" @tab-click="handletChangeTab">
      <el-tab-pane label="所有设备" name="all"></el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
      <el-tab-pane label="NB-loT" name="NB-loT"></el-tab-pane>
      <el-tab-pane label="4G/2G" name="4G/2G"></el-tab-pane>
      <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>
      <div class="shebei_top">
        <el-form ref="form" :model="query" label-width="80px">
          <el-form-item label="EUI:" class="s1">
            <el-input v-model="query.eui" placeholder="设备EUI"></el-input>
          </el-form-item>
          <el-form-item label="设备群组:" class="s1">
            <el-select v-model="query.group">
              <el-option value="济南农业基地"></el-option>
              <el-option value="菏泽农业基地"></el-option>
              <el-option value="潍坊农业基地"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="在线状态:" class="s1">
            <el-select v-model="query.online">
              <el-option value="all" label="全部"></el-option>
              <el-option value="true" label="在线"></el-option>
              <el-option value="false" label="离线"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="绑定时间:" class="s1">
            <el-date-picker
                v-model="query.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button-group>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
          <el-button type="primary" icon="el-icon-delete" @click="handleclear">清除条件</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="handlerefersh">刷新</el-button>
        </el-button-group>
        <span class="s3">搜索结果：{{ total }}</span>
      </div>
    </el-tabs>

    <!--  显示表格数据-->
    <el-table :data="sensorList" style="width: 100%">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="eui" label="EUI"></el-table-column>
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="nums" label="传感器通道"></el-table-column>
      <el-table-column prop="devGroup" label="设备群组"></el-table-column>
      <el-table-column prop="loop" label="上报周期(分钟)"></el-table-column>
      <el-table-column prop="mhz" label="频率(MHz)"></el-table-column>
      <el-table-column prop="online" label="在线状态">
        <template slot-scope="scope">
          {{ scope.row.online | onlineType }}
        </template>
      </el-table-column>
      <el-table-column prop="bTime" label="绑定时间">
        <template slot-scope="scope">
          {{scope.row.bTime | format}}
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">移动</el-button>
          <el-button type="text" size="small">数据</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle";
import {$sensorList} from "@/api";

export default {
  name: "sensorList",
  components: {
    ConTitle,
  },
  data() {
    return {
      sensorList:[],
      total:0,
      query:{//查询和分页传给后台的默认数据
        currPage:1,
        pageSize:5,
        eui:"",
        online:"",
        agreement:"",
        date:[],
        group:"",
      },
      input: '',
      topTitle: {
        type: "设备",
        text: "传感器列表",
        msg: "展示EUI、名称、状态、数据类型等设备信息，可根据EUI、群组、状态、绑定时间等条件筛选具体的传感器节点，并提供移动群组等功能。"
      },
    }
  },
  filters: {
    //在线状态的过滤器
    onlineType(value) {
      return value ? "在线" : "离线";
    },
    //时间戳转日期时间
    format(value){
      //数字小于10 在数字前面加0
      function addZero(num){
        return num >= 10 ? num : "0" + num;
      }
      var time = new Date(value);
      var y = time.getFullYear();
      var m = addZero(time.getMonth() + 1);
      var d = addZero(time.getDate());
      return `${y}-${m}-${d}`;
    }
  },
  //计算属性
  computed: {
    //每次修改时间段时，默认把时间段的数组转为有 - 的字符串
    dateStr(){
      let d1 = this.query.date[0];
      let d2 = this.query.date[1];
      let time1 = d1 && d1.getTime();
      let time2 = d2 && d2.getTime();
      if (time1 && time2){
        return time1 + "-" + time2;
      }else {
        return "";
      }
    }
  },
  methods: {
    //切换tab栏
    handletChangeTab(value){
      this.query.agreement = value.name;
      this.SensorList();
    },
    //刷新页面
    handlerefersh(){
      this.$router.go(0);
    },
    //清除搜索条件
    handleclear(){
      this.query = {//查询和分页传给后台的默认数据
        currPage:1,
            pageSize:5,
            eui:"",
            online:"",
            agreement:"",
            date:[],
            group:"",
      }
      this.SensorList();
    },
    //提交表单的函数
    onSubmit() {
      console.log("表单提交了");
      this.query.currPage = 1;
      this.SensorList();
    },
    SensorList(){
      //需要将分页和查询的参数传给后台

      var queryStr = {...this.query};
      //需要将 搜索的数据重新赋值
      if (this.dateStr != ""){
        queryStr.date = this.dateStr;
      }
      //获取网关列表数据
      $sensorList(queryStr).then(res => {
        console.log(res.data.data);
        this.sensorList = res.data.data;
        //给总数量赋值
        this.total = res.data.total;
      })
    },
    //修改分页的每页显示条数
    handleSizeChange(num){
      console.log("显示条数",num);
      this.query.pageSize = num;
      this.query.currPage = 1;
      this.SensorList();
    },
    //修改当前页页码
    handleCurrentChange(num){
      console.log("当前页",num);
      //将当前页的页码赋值给 currPage
      this.query.currPage = num;
      this.SensorList();
    }
  },
  mounted() {
    this.SensorList();
  }
}
</script>

<style scoped lang="scss">
.cart_top {
  margin-bottom: 10px;

  .s3 {
    color: #888888;
    margin-left: 5px;
    font-size: 13px;
  }
}

.cart_top .shebei_top {
  margin-left: 50px;
  width: 400px;
  font-size: 14px;

  .s1 {
    font-weight: bold;
  }

  .s2 {
    margin-left: 5px;
    margin-right: 5px;
  }
}
</style>